<template>
	<view class="page_content">
		<view class="head_content">
			
				<CustomNavbar title="支付列表"></CustomNavbar>
		</view>
		<view class="" v-for="(item,index) in payList" :key="item.id" @click="change(item)" style="margin: 25rpx 80rpx;display:flex;justify-content: space-between;align-items: center;">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/icons/wx.png" mode="" style="width: 60rpx;height:60rpx" v-if="item.type=='wx'"></image>
				<image src="../../static/icons/zfb.png" mode="" style="width: 60rpx;height:60rpx" v-if="item.type=='zfb'"></image>
				<text style="margin-left: 20rpx;">{{item.name}}</text>
			</view>
			<view class="radis" >
				<view :class="item.act==item.id?'active':'cc'"></view>
			</view>
		</view>
		<view class="" style="margin:200rpx 85rpx 25rpx;">
			<view id="myButton"></view>
			<u-button type="primary" shape="circle" @click="submit">确定提交</u-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payData:{},
				payList:[],
				payType:-1,
				timer:null,
				order_sn:'',
				type:'wx',
				strings: '<div style="text-align:center;"><a href="https://www.example.com" target="_blank">跳转</a></div>'
			}
		},
	
		onLoad(){
			this.postChannel()
			const cachedData = uni.getStorageSync('dataKey');
			this.payData=cachedData
			
		},
		onUnload() {
			clearInterval(this.timer); 
		},
		methods: {
			change(data){
				this.payList.forEach(i=>{
					if(i.id==data.id&&i.type==data.type){
						this.payType=i.id
						this.type=data.type
						i.act=data.id
					}else{
						i.act=-1
					}
				})
			},
			//获取通道
			postChannel(){
				this.$request('common.postChannel').then(res => {
					res.data.forEach((i,z)=>{
						if(z==0){
							this.payType=i.id,
							this.type= (i.type_status=='1'?'wx':'zfb')
						}
						switch(i.type_status){
							case '1':
							this.payList.push({
								name:i.name,
								id:i.id,
								type:'wx',
								act:z==0?i.id:-1,
							})
							
							break;
							case '2':
							this.payList.push({
								name:i.name,
								id:i.id,
								type:'zfb',
								act:z==0?i.id:-1,
							})
						
							break;
							case '3':
							this.payList.push({
								name:i.name,
								id:i.id,
								type:'wx',
								act:z==0?i.id:-1,
							},{
								name:i.name,
								id:i.id,
								type:'zfb',
								act:-1,
							})
						
							break;
						}
						
					})
				})
			},
			//提交订单
			submit(){
				uni.showLoading({
					title: '开通中...',
					mask: false
				})
				this.$request('common.postPay',{
					payType:this.payType,
					name:this.payData.name,
					price:this.payData.price,
					id:this.payData.id,
					type:this.type
				}).then(res => {
					console.log("跳转连接",res.data)
					const systemInfo = uni.getSystemInfoSync();
					//this.src=res.data.payurl
					const data = {};
					data.order_sn=res.data.order_sn
					data.payurl=res.data.payurl,
					data.id=this.payType
					uni.setStorageSync('orderKey', data);
					uni.navigateTo({
						url:'/pages/common/webview',
						
					})
					// 判断平台
					/*if (systemInfo.platform === 'android') {
					    console.log('Android设备');
						window.open(res.data.payurl,'_blank')
						const self=this
						this.timer = setInterval(function(){
						   self.orderStatus(res.data.order_sn);
						}, 2000);
					} else if (systemInfo.platform === 'ios') {
					    console.log('iOS设备');
						window.location.href=res.data.payurl
					} else {
					    console.log('其他平台');
						window.open(res.data.payurl,'_blank')
						const self=this
						this.timer = setInterval(function(){
						   self.orderStatus(res.data.order_sn);
						}, 2000);
					}*/
					
					
					
				})
			},
			orderStatus(order_sn){
				this.$request('common.status', {
					order_sn,
					id:this.payType
				}).then(res => {
					
					if(res.data==1){
						clearInterval(this.timer); 
						this.timer=null
						uni.showToast({
						    title: '支付成功',
							icon: 'none',
							duration: 2000
						});

						
						// uni.$emit('updateUserInfo', true)
						uni.hideLoading()
						uni.switchTab({
							url: '/pages/home/user'
						});
					}
					
				})
			},
		}
	}
</script>

<style scoped>
	.radis{
		width: 20px;
		height: 20px;
		border: 1px solid #333;
		border-radius: 50%;
		display: flex;
		    align-items: center;
		    justify-content: center;
	}
.active{
	width: 70%;
	    height: 70%;
	    background: #1495E7;
	    border-radius: 50%;
}
</style>
